<template>
    <div>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="城市" name="1">
                <el-radio-group v-model="cityRadio" @change="handleCityChange">
                    <el-radio-button
                        v-for="c in city"
                        :key="c.value"
                        :label="c.value"
                    >
                        {{ c.label }}
                    </el-radio-button>
                </el-radio-group>
                <el-cascader
                    placeholder="输入城市名"
                    :options="province"
                    v-model="provinceValue"
                    :show-all-levels="false"
                    filterable
                    @change="handleProvinceChange"
                ></el-cascader>
            </el-collapse-item>
            <el-collapse-item title="薪资" name="2">
                <el-radio-group
                    v-model="salaryRadio"
                    @change="handleSalaryChange"
                >
                    <el-radio-button
                        v-for="s in salary"
                        :key="s.value"
                        :label="s.value"
                    >
                        {{ s.label }}
                    </el-radio-button>
                </el-radio-group>
            </el-collapse-item>
            <el-collapse-item title="学历" name="3">
                <el-radio-group
                    v-model="degreeRadio"
                    @change="handleDegreeChange"
                >
                    <el-radio-button
                        v-for="d in degree"
                        :key="d.value"
                        :label="d.value"
                    >
                        {{ d.label }}
                    </el-radio-button>
                </el-radio-group>
            </el-collapse-item>
            <el-collapse-item title="经验" name="4">
                <el-radio-group
                    v-model="experienceRadio"
                    @change="handleExperienceChange"
                >
                    <el-radio-button
                        v-for="e in experience"
                        :key="e.value"
                        :label="e.value"
                    >
                        {{ e.label }}
                    </el-radio-button>
                </el-radio-group>
            </el-collapse-item>
            <el-collapse-item title="其他" name="5">
                <el-cascader
                    placeholder="职位类型"
                    :options="industry"
                    v-model="categoryValue"
                    :key="industry.industryId"
                    :label="industry.industryName"
                    :children="industry.categories"
                    :show-all-levels="false"
                    filterable
                    @change="handleCategoryChange"
                ></el-cascader>
                <el-select
                    v-model="enterpriseNatureValue"
                    filterable
                    placeholder="企业性质"
                    @change="handleNatureChange"
                >
                    <el-option
                        v-for="item in enterpriseNature"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-select
                    v-model="enterpriseScaleValue"
                    filterable
                    placeholder="企业规模"
                    @change="handleScaleChange"
                >
                    <el-option
                        v-for="item in enterpriseScale"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
let nature = require('@/assets/nature-code.json')
let scale = require('@/assets/scale-code.json')
let city = require('@/assets/city-code.json')
let salary = require('@/assets/salary-code.json')
let degree = require('@/assets/degree-code.json')
let experience = require('@/assets/experience-code.json')
export default {
    data() {
        return {
            activeName: '0',
            cityRadio: '',
            salaryRadio: '',
            degreeRadio: '',
            experienceRadio: '',
            enterpriseNatureValue: '',
            enterpriseScaleValue: '',
            categoryValue: '',
            provinceValue: [],
            province: {
                value: '',
                label: '',
                children: {
                    value: '',
                    label: ''
                }
            },
            industry: {
                value: '',
                label: '',
                children: {
                    value: '',
                    label: ''
                }
            },
            enterpriseNature: nature,
            enterpriseScale: scale,
            city: city,
            salary: salary,
            degree: degree,
            experience: experience,
            formData: {
                city: '0',
                province: '0',
                salary: '0',
                degree: '0',
                experience: '0',
                category: '0',
                nature: '0',
                scale: '0'
            }
        }
    },
    mounted() {
        this.$axios.post('/city/allProvinceCity').then((resp) => {
            this.province = resp.data
        })
        this.$axios.post('/category/allIndustryCategory').then((resp) => {
            this.industry = resp.data
        })
    },
    methods: {
        handleCityChange(value) {
            this.$message(value)
            this.$store.commit('setSeekerSelectCity', value)
            this.submitForm()
        },
        handleProvinceChange(value) {
            this.$message('Selected value:' + value[value.length - 1])
            this.$store.commit('setSeekerSelectProvince', value[value.length - 1])
            this.submitForm()
        },
        handleSalaryChange(value) {
            this.$message(value)
            this.$store.commit('setSeekerSelectSalary', value)
            this.submitForm()
        },
        handleDegreeChange(value) {
            this.$message(value)
            this.$store.commit('setSeekerSelectDegree', value)
            this.submitForm()
        },
        handleExperienceChange(value) {
            this.$message(value)
            this.$store.commit('setSeekerSelectExperience', value)
            this.submitForm()
        },
        handleCategoryChange(value) {
            this.$message('Selected value:' + value[value.length - 1])
            this.$store.commit('setSeekerSelectCategory', value[value.length - 1])
            this.submitForm()
        },
        handleNatureChange(value) {
            this.$message('Selected value:' + value)
            this.$store.commit('setSeekerSelectNature', value)
            this.submitForm()
        },
        handleScaleChange(value) {
            this.$message('Selected value:' + value)
            this.$store.commit('setSeekerSelectScale', value)
            this.submitForm()
        },
        submitForm() {
            // this.$axios
            //     .post('occupation/occupationSearch', this.$store.state.seekerSearchData)
            //     .then((response) => {
            //         this.$message('Data submitted successfully!')
            //     })
            //     .catch((error) => {
            //         this.$message.error('Failed to submit data.')
            //     })
        }
    }
}
</script>

<style  scoped>
.el-radio-button,
.el-cascader,
.el-select {
    padding-right: 20px;
}
</style>
